<template>
	<div class="not-address-box" @click='addAddress'>
		<van-cell is-link>
			<template slot="title">
				<img :src="positionImg" alt="">
				<span class="custom-title">请填写收货地址</span>
			</template>
		</van-cell>
		<img :src="positionBottomImg" alt="" class="position-bottom-img">
	</div>
</template>

<script>
	import {
		Cell,
	} from "vant";
	export default {
		name: "NotAddresss",
		components: {
			[Cell.name]: Cell,
		},
		data() {
			return {
				positionImg: require("../common/imgs/position.png"),
				positionBottomImg: require("../common/imgs/position-bottom.png"),
			};
		},
		methods:{
			addAddress(){
				this.$emit('addAddress')
			}
		}
	};
</script>

<style scoped lang="less">
	.not-address-box {

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.position-bottom-img {
		width: 100%;
		height: 5px;
	}

	.van-cell.van-cell--clickable {
		padding: 38px 24px;
		border-radius: 16px;
	}

	.van-cell__title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		img {
			width: 40px;
			height: 40px;
			margin-right: 16px;
		}

		.custom-title {
			font-size: 34px;
			font-weight: 500;
			color: #222222;
		}
	}
</style>
